<script setup>
import { ref, computed } from 'vue'
const todoName = ref('')

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})

// const emit = defineEmits(['addTodo'])
const emit = defineEmits(['todoName'])
const add = (e) => {
  if (todoName.value) {
    emit('addTodo', todoName.value)
    todoName.value = ''
  }
}
const ischeckAll = computed(() => {
  return props.list.every((item) => item.done)
})
</script>

<template>
  <header class="header">
    <h1>todo</h1>
    <input
      type="checkbox"
      :checked="ischeckAll"
      @change="emit('checkAll', !ischeckAll)"
    />
    <input
      class="new-todo"
      placeholder="你下面的计划是什么"
      autofocus
      v-model="todoName"
      @keydown.enter="add"
    />
  </header>
</template>
